<template>
  <div
    @mouseenter="showInfo"
    @mouseleave="hideInfo"
    class="user relative"
    :style="{height: `${width}px`, marginRight: marginRight}">
    <img
      v-if="srcProps"
      :src="src"
      :style="{width: `${width}px`, height: `${width}px`}"/>
    <div
      :style="{height: `${width}px`, width: `${width}px`, 'line-height': `${width}px`}"
      class="contact-img" v-else>
      <i class="iconfont icon-user" :style="{fontSize: fontSize}"></i>
    </div>
    <div
      v-if="userHover"
      @click="handle"
      class="user-hover t-center"
      :style="{
      width: `${width}px`,
      height: `${width}px`,
      lineHeight: `${width}px`}"><small>{{hoverText}}</small></div>
  </div>
</template>

<script>
  export default {
    name: 'zz-user',
    data () {
      return {
        src: '/static/image/loading.gif',
        userHover: false
      }
    },
    watch: {
      srcProps () {
        this.getSourceImg()
      }
    },
    props: {
      srcProps: {
        type: String,
        default: ''
      },
      info: {
        type: Object
      },
      option: {
        type: Object
      },
      hoverText: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '40'
      },
      marginRight: {
        type: String,
        default: '10px'
      },
      fontSize: {
        type: String,
        default: '20px'
      }
    },
    mounted () {
      this.getSourceImg()
    },
    methods: {
      getSourceImg () {
        if (this.srcProps !== '' && this.srcProps) {
          if (this.srcProps.includes('http')) {
            this.src = this.srcProps
          } else {
            const src = this.srcProps.split('-')
            if (src.length === 5 && !this.srcProps.includes('.')) {
              this.$store.dispatch({
                type: 'downFile',
                fileUuid: this.srcProps,
                th: 4
              }).then(res => {
                this.src = res
              }, err => {
                this.$message.error(err)
              })
            } else {
              this.$store.dispatch({
                type: 'downFile',
                url: this.srcProps,
                th: 4
              }).then(res => {
                this.src = res
              }, err => {
                this.$message.error(err)
              })
            }
          }
        }
      },
      showInfo (e) {
        if (this.info) {
          this.$viewBox.open({detail: this.info, event: e, type: 'user', top: 40})
        }
        if (this.hoverText) {
          this.userHover = true
        }
      },
      hideInfo () {
        if (this.info) {
          this.$viewBox.close()
        }
        if (this.hoverText) {
          this.userHover = false
        }
      },
      handle () {
        this.$emit('handle', this.option)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user{
    overflow: hidden;
    &:last-child{
      margin-right: 0;
    }
    .contact-img{
      text-align: center;
      background: $color;
      .icon-user{
        color: #fff;
      }
    }
    .user-hover{
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
      background: rgba(0, 0, 0, 0.5);
      >small{
        color: #fff;
      }
    }
  }
</style>
